<#-- @ftlvariable name="containerTable" type="java.util.Map<java.lang.Long,com.fable.sp.core.domain.ColumnDef>" -->
<#-- @ftlvariable name="insSupportTypes" type="java.util.Map<java.lang.Long,java.util.List<ColumnType>>" -->
<#-- @ftlvariable name="pInstances" type="java.util.List<com.fable.sp.core.domain.WidgetInstance>" -->
<@ui.designerWizard activeStep=3/>
<style>
    td {
        text-align: center !important;
        vertical-align: middle !important;
    }
</style>
<form id="bindingForm">
    <div class="panel panel-primary">
        <div class="panel-heading">数据绑定</div>
        <table class="table table-bordered">
            <tr>
                <th class="text-center">实例ID</th>
                <th class="text-center">实例描述</th>
                <th class="text-center" width="160px">字段名</th>
                <th class="text-center" width="120px">值类型</th>
                <th class="text-center" width="100px">字节数</th>
            <#-- <th class="text-center" width="60px">必须</th>
             <th class="text-center" width="60px">索引</th>-->
            </tr>
        <#list pInstances as ins>
            <#assign fieldTypes = insSupportTypes?api.get(ins.id)/>
            <#assign columnDef = containerTable.instanceColumns?api.get(ins.id)!/>
            <tr data-instance-id="${ins.id}">
                <td class="form-control-static">${ins.id}</td>
                <td class="form-control-static">${ins.displayName}</td>
                <td><input class="form-control validate[required,maxSize[20]]"
                           value="${columnDef?has_content?string(columnDef.name,ins.id)}"/></td>
                <#assign columnType = columnDef?has_content?string(columnDef.columnType,fieldTypes[0])/>
                <td>
                    <#if fieldTypes?size == 1>
                    ${fieldTypes[0].title}
                        <input type="hidden" value="${fieldTypes[0]}">
                    <#else >
                        <select name="fieldType" class="form-control">
                            <#list fieldTypes as fieldType>
                                <option value="${fieldType.toString()}">${fieldType.title}</option>
                            </#list>
                        </select>
                    </#if>
                </td>
                <#assign defaultLength = (columnType == "STRING")?string("255","20")/>
                <#assign length = columnDef?has_content?string(columnDef.length,defaultLength)/>
                <td>
                    <input type="text" class="form-control validate[required,custom[integer]]" value="${length}"/>
                </td>
            <#--<td><input type="checkbox" <#if columnDef.required=="true">checked="checked"</#if>></td>
            <td><input type="checkbox" <#if columnDef.unique=="true">checked="checked"</#if>></td>-->
            </tr>
        </#list>
        </table>
    </div>
</form>
<div class="text-center">
    <button type="button" class="btn btn-primary" id="submitAndPublish">创建/更新数据表</button>
    <a class="btn btn-default" href="${ctx}/sp/containers">回到列表页</a>
</div>
<script>
    $(function () {
        var _form = $('#bindingForm');
        var _updating = false;
        var infoModal = SP.infoModal("请稍后...");
        var failureModal = SP.infoModal("表中存在某些数据,导致无法更改字段类型或长度,请手动操作");

        $("#submitAndPublish").click(function () {
            if (_updating) {
                return;
            }
            var result = _form.validationEngine('validate');
            if (result) {
                SP.confirm("<div class='alert alert-info'>" +
                        "<div><h5>修改长度或类型</h5>如果更改字段类型和长度,会尝试更改,失败后请手动更改.(取决于现有数据是否和目标数据格式有冲突)</div>" +
                        "</div>", function () {
                    var columnDefs = {};
                    var names = [];
                    var sameNames = [];
                    _form.find("tr:not(:first)").each(function () {
                        var _tr = $(this);
                        var _tds = _tr.find("td");
                        var _name = $(_tds.get(2)).find("input").val();
                        if ($.inArray(_name, names) >= 0) {
                            sameNames.push(_name);
                            return;
                        }
                        names.push(_name);
                        columnDefs[_tr.attr("data-instance-id")] = {
                            "name": $(_tds.get(2)).find("input").val(),
                            "columnType": $(_tds.get(3)).find("input,select").val(),
                            "length": $(_tds.get(4)).find("input").val()/*,
                            "unique": $(_tds.get(5)).find("input").is(":checked"),
                            "required": $(_tds.get(6)).find("input").is(":checked")*/
                        };
                    });
                    if (sameNames.length > 0) {
                        alert("存在以下重复的字段名:" + sameNames.join(","));
                        return;
                    }
                    _updating = true;
                    infoModal.modal("show");
                    $.ajax({
                        url: "<@spring.url relativeUrl='/sp/saveContainerTable'/>?containerId=${containerId}",
                        type: "post",
                        data: JSON.stringify(columnDefs),
                        dataType: "json",
                        contentType: "application/json",
                        processData: false,
                        success: function (flag) {
                            _updating = false;
                            if (!flag) {
                                failureModal.modal("show");
                            }
                        },
                        complete: function () {
                            infoModal.modal("hide");
                        }
                    });
                });
            }
        });
    });
</script>